<template>
  <el-dialog title="项目成员列表" :visible.sync="isShow" :close-on-click-modal="false" destroy-on-close width="40%">
    <div class="form">
      <div>
        <quick-action-bar>
          <quick-icon-button icon="icon-icon_xinzeng" tooltip="新增成员" @click="addMember(project_id)" />
        </quick-action-bar>
      </div>
      <el-table style="width: 100%" :data="members">
        <el-table-column label="员工" prop="employee_name"> </el-table-column>
        <el-table-column label="职务" prop="duty"> </el-table-column>
        <el-table-column label="创建时间" prop="create_date"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <quick-action-bar>
              <quick-icon-button icon="icon-xiugai" tooltip="编辑" @click="editMember(scope.row)" />
              <quick-icon-button icon="icon-shanchu" tooltip="删除" @click="deleteMember(scope.row.id)" />
            </quick-action-bar>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <project-add-member ref="addMemberDialog" @added="refresh"></project-add-member>

    <project-edit-member ref="editMemberDialog" @edit="refresh"></project-edit-member>
    <span slot="footer">
      <el-button type="primary" :loading="loading" size="medium" @click="isShow = false">确 定</el-button>
      <el-button size="medium" plain @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import _api from "../../common/api/project_member";
import ProjectAddMember from "./ProjectAddMember";
import ProjectEditMember from "./ProjectEditMember";
export default {
  components: {
    ProjectAddMember,
    ProjectEditMember,
  },
  data() {
    return {
      loading: false,
      isShow: false,
      rules: {},
      project_id: "",
      condition: {
        page_index: 1,
        page_size: 999,
        project_id: "",
        employee_id: "",
      },
      members: [],
    };
  },
  methods: {
    showDialog(row) {
      this.form = {};
      this.project_id = row.id;
      this.condition.project_id = row.id;
      this.isShow = true;
      this.getMember();
    },

    async getMember() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.members = result.data;
      } catch (error) { }
    },

    addMember(project_id) {
      this.$refs.addMemberDialog.showDialog(project_id);
    },

    editMember(row) {
      this.$refs.editMemberDialog.showDialog(row);
    },

    deleteMember(id) {
      this.$confirm("你确定删除此项吗？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await _api.deleteAsync(id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.refresh();
          } catch (error) {
            this.$message({
              type: "info",
              message: `删除失败，${error}`,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    refresh() {
      this.getMember();
    },
  },
  mounted() { },
  computed: {},
};
</script>

<style lang="scss" sooped>
.avatar-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0;
}

.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader .el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.el-dialog {
  .el-dialog__body {
    padding: 5px 20px;
    padding-bottom: 10px;
  }
}
</style>